'
<template>
    <!--  <a-spin :spinning="loading">-->
    <a-layout
        style="min-height: 100vh"
        class=""
        id="components-layout-demo-custom-trigger"
    >
        <!--      左侧树形-->
<!--        <a-layout-sider-->
<!--            collapsedWidth="0px"-->
<!--            width="220px"-->
<!--            v-model="collapsed"-->
<!--            :trigger="null"-->
<!--            collapsible-->
<!--        >-->
<!--            <div class="logo-company" >-->
<!--            <img loading="lazy" src="../assets/image/anywell.png" alt="" >-->
<!--            </div>-->
<!--            <TreeList @onCheck="onCheck" />-->
<!--        </a-layout-sider>-->
        <a-layout>
            <!--        头部-->
            <a-layout-header style="background: #fff; padding: 0">
                <a-icon
                    class="trigger"
                    :type="collapsed ? 'menu-unfold' : 'menu-fold'"
                    @click="() => (collapsed = !collapsed)"
                />
            </a-layout-header>
            <!--        内容-->
            <a-layout-content
                class="box"
                :style="{ margin: '10px', padding: '5px' }"
            >
                <TableList :checkedKeys="checkedKeys" />
            </a-layout-content>
        </a-layout>
    </a-layout>
    <!--  </a-spin>-->
</template>

<script>
import { mapActions, mapState, mapGetters } from 'vuex'
// import TreeList from '@/views/component/TreeList'
import TableList from '@/views/component/TableList'

export default {
    name: 'Home',
    components: {
        TableList
        // TreeList
    },
    data () {
        return {
            collapsed: false,
            checkedKeys: []
        }
    },
    computed: {
        // todo 演示vuex操作
        ...mapState('user', ['count']),
        ...mapGetters('user', ['sumWithRootCount'])
    },
    created () {},
    methods: {
        ...mapActions('user', ['incrementIfOddOnRootSum']),
        onCheck (checkedKeys) {
            this.checkedKeys = checkedKeys
        }
    }
}
</script>
<style lang="scss">
@import './../assets/css/base';

.ant-tree-title {
    color: $color-gray;
}

.ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected {
    background: none !important;
}

.ant-tree li .ant-tree-node-content-wrapper:hover {
    background: none !important;
}
</style>
<style lang="scss" scoped>
@import './../assets/css/base';

.flex {
    flex: 1;
}

#components-layout-demo-custom-trigger .trigger {
    font-size: 18px;
    line-height: 64px;
    padding: 0 24px;
    cursor: pointer;
    transition: color 0.3s;
}

#components-layout-demo-custom-trigger .trigger:hover {
    color: #1890ff;
}

// #components-layout-demo-custom-trigger .logo {
//     height: 32px;
//     background: rgba(255, 255, 255, 0.2);
//     margin: 16px;
// }
#components-layout-demo-custom-trigger .logo-company {
    display: block;
    padding: 10px 0;
    height: 50px;
    width: 180px;
}
#components-layout-demo-custom-trigger .logo-company img{
    display: block;
    margin: auto;
    height: 100%;
    object-fit: cover;
}
</style>
